<template>
  <div class="app">
    <!-- 搜索栏 -->
    <van-search v-model="value" placeholder="请输入搜索想搜索的歌单" input-align="center" />
    <!-- 分类 -->
    <div class="floldBox">
      <div class="flyungBox" v-for="item in titles" :key="item.id">
        <img :src="item.icon" alt="" style="width: 100%">
        <span>{{ item.title }}</span>
      </div>
    </div>
    <!-- 播报 -->
    <div class="castoldBox">
      <p>随心听FM</p>
      <van-swipe class="my-swipe" indicator-color="white" @change="onChange">
        <!-- 1 -->
        <van-swipe-item v-for="item in castlist" :key="item.id">
          <div class="main">
            <img :src="item.icon" alt="">
            <div class="bright">
              <van-notice-bar background="#f1eeec" color="brown" scrollable text="爱恒古不变,紫罗兰永世长存" />
              <p>3000次播放</p>
              <p>生活中的紫罗兰</p>
              <img id="bf" src="../../assets/phoneShow/podcastImgs/播放.png" alt="">
            </div>
          </div>
        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">
            {{ castlist[current].title }}
          </div>
        </template>
      </van-swipe>
    </div>
    <!-- 猜你喜欢 -->
    <div class="favorite">
      <div class="top">
        <span><i class="fa fa-refresh" aria-hidden="true" style="color: red; margin-right: 10px;"></i>猜你喜欢</span>
        <div class="right">兴趣定制 ></div>
      </div>
      <div class="bottom">
        <van-grid :border="false" :column-num="3">
          <van-grid-item v-for="item in favorlist" :key="item.id">
            <van-image :src="item.icon" />
            <div class="depict">
              <span class="ellipsis"><span>热门播放</span>{{ item.title }}</span>
              <div class="bfl"><i class="fa fa-play-circle" aria-hidden="true"></i><i
                  style="font-style: normal;">3378</i></div>
            </div>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
    <!-- 排行榜 -->
    <div class="rank">
      <div class="top">
        <h3>排行榜</h3>
        <span>更多 ></span>
      </div>

      <div class="main">
        <van-tabs background="wheat" title-active-color="black" title-inactive-color="grey" :border="false">
          <van-tab v-for="tablist in tabslist" :title="'推荐榜 '" :key="tablist">
            <!-- 排行榜内容 -->
            <van-swipe @change="onChange">
              <van-swipe-item v-for="index in 6" :key="index">
                <div class="recommend" v-for="item in tablist" :key="item.id">
                  <img :src="item.icon" alt="">
                  <div class="right">
                    <h4>{{ item.title }}</h4>
                    <div class="bottom">
                      <span>动漫音乐</span>
                      <i style="font-style:normal;">鬼台</i>
                    </div>
                    <span class="ranktab">
                      <img :src="item.tab" alt="">
                      <i style="font-style:normal">{{ item.id }}</i>
                    </span>
                  </div>
                </div>
              </van-swipe-item>
              <template #indicator>
                <div class="custom-indicator"></div>
              </template>
            </van-swipe>
          </van-tab>
        </van-tabs>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: "Podcast",
  data() {
    return {
      active: 1,
      current: 0,
      tabslist: [
        [
          {
            id: 1,
            tab: require('../../assets/phoneShow/podcastImgs/标签1.png'),
            icon: require('../../assets/phoneShow/podcastImgs/ai.jpg'),
            title: "薇儿利特大嫂客户丢武器和今安徽队"
          },
          {
            id: 2,
            tab: require('../../assets/phoneShow/podcastImgs/标签 2.png'),
            icon: require('../../assets/phoneShow/podcastImgs/火影.jpg'),
            title: "晓组织安徽丢弃和去哦加哦的机器偶就东坡"
          },
          {
            id: 3,
            tab: require('../../assets/phoneShow/podcastImgs/标签 3.png'),
            icon: require('../../assets/phoneShow/podcastImgs/电波女.jpg'),
            title: "电波女福娃神佛i文化风情文化父亲为父亲为"
          }

        ],
        [
        {
          id: 1,
          tab: require('../../assets/phoneShow/podcastImgs/标签1.png'),
          icon: require('../../assets/phoneShow/podcastImgs/book.png'),
          title: "薇儿利特大嫂客户丢武器和今安徽队"
        },
        {
          id: 2,
          tab: require('../../assets/phoneShow/podcastImgs/标签 2.png'),
          icon: require('../../assets/phoneShow/podcastImgs/线性月亮.png'),
          title: "晓组织安徽丢弃和去哦加哦的机器偶就东坡"
        },
        {
          id: 3,
          tab: require('../../assets/phoneShow/podcastImgs/标签 3.png'),
          icon: require('../../assets/phoneShow/podcastImgs/排行榜.png'),
          title: "电波女福娃神佛i文化风情文化父亲为父亲为"
        }
        ]
      ],
      favorlist: [
        {
          id: 1,
          icon: require('../../assets/phoneShow/podcastImgs/ai.jpg'),
          title: "薇儿利特大嫂客户丢武器和今安徽队"
        },
        {
          id: 2,
          icon: require('../../assets/phoneShow/podcastImgs/火影.jpg'),
          title: "晓组织安徽丢弃和去哦加哦的机器偶就东坡"
        },
        {
          id: 3,
          icon: require('../../assets/phoneShow/podcastImgs/电波女.jpg'),
          title: "电波女福娃神佛i文化风情文化父亲为父亲为"
        },
        {
          id: 4,
          icon: require('../../assets/phoneShow/podcastImgs/2.jpg'),
          title: "薇儿利特2去哦i紧哦碰千万记得去"
        },
        {
          id: 5,
          icon: require('../../assets/phoneShow/podcastImgs/5.jpg'),
          title: "晓组织wish覅欧文还好我放弃我和覅哦o"
        },
        {
          id: 6,
          icon: require('../../assets/phoneShow/podcastImgs/6.jpg'),
          title: "电波女强耦合人情味哟普燃气废气哦i回复"
        },
      ],
      castlist: [
        {
          id: 1,
          icon: require('../../assets/phoneShow/podcastImgs/ai.jpg'),
          title: "薇儿利特"
        },
        {
          id: 2,
          icon: require('../../assets/phoneShow/podcastImgs/火影.jpg'),
          title: "晓组织"
        },
        {
          id: 3,
          icon: require('../../assets/phoneShow/podcastImgs/电波女.jpg'),
          title: "电波女"
        }
      ],
      titles: [
        {
          id: 1,
          icon: require('../../assets/phoneShow/podcastImgs/podcast.png'),
          title: "我的播客"
        },
        {
          id: 2,
          icon: require('../../assets/phoneShow/podcastImgs/分类.png'),
          title: "全部分类"
        },
        {
          id: 3,
          icon: require('../../assets/phoneShow/podcastImgs/排行榜.png'),
          title: "排行榜"
        },
        {
          id: 4,
          icon: require('../../assets/phoneShow/podcastImgs/线性月亮.png'),
          title: "助眠解压"
        },
        {
          id: 5,
          icon: require('../../assets/phoneShow/podcastImgs/book.png'),
          title: "有声书"
        },
        {
          id: 6,
          icon: require('../../assets/phoneShow/podcastImgs/icon_电台.png'),
          title: "广播电台"
        }
      ],
    }
  },
  mounted() {
    this.$store.state.phoneTitle = this.$route.meta.title
  },
  methods: {
    onChange(index) {
      this.current = index;
    }
  }
}
</script>

<style lang="less" scoped>
.app {
  padding-bottom: 60px;
}


.rank {
  padding: 0 10px 0 10px;

  .top {
    display: flex;
    justify-content: space-between;

    span {
      text-align: center;
      width: 60px;
      height: 25px;
      border: 1px solid grey;
      border-radius: 100%;
    }
  }

  .main {
    width: 370px;
    height: 300px;
    margin-top: 15px;
    border-radius: 5%;
    background-color: wheat;
    padding-top: 10px;

    .van-tab {
      margin-left: 100px !important
    }

    .recommend {
      position: relative;
      text-align: left;
      margin-left: 10px;
      margin-top: 10px;
      display: flex;

      img {
        width: 50px;
        height: 50px;
        border-radius: 10%;
      }

      .right {
        margin-left: 10px;

        .ranktab {
          position: absolute;
          width: 50px;
          height: 50px;
          top: 0px;
          left: -5px;

          img {
            width: 30px;
            height: 30px;
          }

          i {
            font-size: 14px;
            position: absolute;
            top: 8px;
            left: 5px;
          }

        }

        .bottom {
          span {
            font-size: 12px;
            width: 20px;
            height: 20px;
            border: 1px solid grey;
            margin-right: 10px;
          }

          i {
            font-size: 15px;
            color: gray;
          }
        }
      }

    }
  }
}

.favorite {
  margin-top: 10px;
  padding: 10px;

  .bottom {
    .van-grid-item {
      height: 200px;
      width: 200px;
      position: relative;

      .ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;

        span {
          width: 15px;
          height: 15px;
          font-size: 12px;
          border: 1px solid rgba(220, 220, 220, 0.911);
          border-radius: 20%;
          margin-right: 3px;

        }
      }

      .bfl {
        position: absolute;
        background-color: rgba(128, 128, 128, 0.425);
        top: 32px;
        right: 15px;

        i {
          color: white;
          font-size: 14px;
          margin-right: 3px;
        }
      }

      .van-image {
        margin-top: px;
        width: 100px;
        height: 100px;
        border-radius: 100% !important;

      }
    }


  }

  .top {
    display: flex;
    justify-content: space-between;

    span {
      font-size: 22px;
      font-weight: bold;
    }

    .right {
      text-align: center;
      border: 1px solid rgba(220, 220, 220, 0.911);
      border-radius: 50%;
      line-height: 30px;
      width: 100px;
      height: 30px;
    }

  }
}

.castoldBox {
  margin-top: 30px;
  width: 100%;
  height: 200px;
  background: #ded6d1;
  text-align: center;
  color: rgba(128, 128, 128, 0.996);

  .custom-indicator {
    font-size: 20px !important;
    color: blue !important;
    margin-top: 5px;
  }

  .main {
    display: flex;
    margin: 0 auto;
    margin-top: 5px;
    width: 80%;
    height: 120px;
    background-color: rgba(255, 255, 255, 0.584);
    border-radius: 5%;
    padding: 20px;

    .bright {
      width: 100%;
      position: relative;

      .van-notice-bar {
        font-size: 18px;
      }

      p {
        margin-left: 15px;
        text-align: left;
      }

      #bf {
        width: 40px;
        height: 40px;
        position: absolute;
        right: 0px;
        bottom: -5px;
        cursor: pointer;
      }
    }

    img {
      width: 80px;
      height: 80px;
      border-radius: 10%;
      // float: left;
    }
  }
}

.floldBox::-webkit-scrollbar {
  display: none;
}

.floldBox {
  overflow-x: scroll;
  white-space: nowrap;
  width: 100%;
  margin-top: 20px;
  overflow-x: auto;

  .flyungBox {
    text-align: center;

    margin-left: 20px;
    display: inline-block;

    img {
      width: 40px !important;
      height: 40px !important
    }

    span {
      margin-top: 15px;
      display: block;
    }

  }
}
</style>